<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<ul>
    <li>小米a</li>
    <li>苹果ab</li>
    <li>三星cc</li>
    <li>联想dd</li>
    <li>华为</li>
    <li>荣耀</li>
    <li></li>
    <li>
        <span></span>
    </li>
</ul>
<h1>标题一</h1>
<h2>标题二</h2>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
    //基本过滤选择器:
    //$('div:first').css('background','red');
    //$('ul li:first').css('background','yellow');
    //$('div:last').css('background','blue');
    //$('li:not(:first)').css('background','pink');
    //$('ul li:even').css('background','blue');
    //$('ul li:odd').css('background','green');
    //$('ul li:eq(2)').css('background','orange');
    //$('ul li:not(:eq(2))').css('background','green');
    //$('ul li:gt(2)').css('background','#00ff00');
    //$('ul li:lt(2)').css('background','purple');
    /*  $('ul li:lt(2)').css('background','#00ff00');
    $('ul li:last').css('background','#00ff00');  */
    //$('ul li:not(:last,:gt(2))').css('background','#00ff00');
    //$('ul li:gt(1):not(:last)').css('background','#00ff00');
    //$(':header').css('background','red');

    //内容过滤选择器:
    //$('ul li:contains(a)').css('background','red');
    //$('ul li:empty').css('background','red');
    //$('ul li:has(span)').css('background','red');
    //$('ul li:parent').css('background','red');

})
</script>
</body>
</html>